<style scoped>
	.address_container {
		margin-top: 4px;
		background: #fff;
		padding-left: 10px;
	}
	.page-button-group {
		margin-top: 30px;
		padding: 0 10px;
	}
</style>
<template>
	<div>
		<app-header>
            <div>设置地址</div>
            <div slot="headerRightBtn" @click="goToHome">
                <span class="icon-home"></span>
            </div>
            <div slot="headerLeftBtn" @click="goToDeliverAddress">
                <span class="icon-back"></span>
            </div>
        </app-header>
		<div class="page address_container">
			<div>
				<mt-field label="姓名" placeholder="请填写姓名" v-model="addressItem.name"></mt-field>
			</div>
			<div>
				<mt-field label="电话" placeholder="请填写电话" v-model="addressItem.phone"></mt-field>
			</div>
			<div @click="select">
				<mt-field label="地区" placeholder="请设置地区" :value="(addressItem.province+addressItem.city+addressItem.district)||''" readonly>
				</mt-field>
			</div>
			<div>
				<mt-field label="详细地址" placeholder="请填写详细地址" v-model="addressItem.address"></mt-field>
			</div>
		</div>
		<distpicker v-if="show" :ref="show" @changeValue='isShow' :province='addressItem.province' :city='addressItem.city' :county='addressItem.district'></distpicker>
		<div class="page-button-group">
			<mt-button size="large" type="danger" @click="save">保存</mt-button>
		</div>
	</div>
</template>
<script>
	import { get, mod, add } from './api'
	import utils from '@utils'
	import distpicker from '@components/distpicker'
	import { Button, Field } from 'mint-ui'

	export default {
		name: 'deliveryAddressSet',
		components: {
			distpicker,
			mtButton: Button,
			mtField: Field
		},
		data() {
			return {
				addressItem: {},
		      	show: false,
		      	actionLoading: false
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				if(this.$route.params.id) {
					get({id: this.$route.params.id}).then((data) => {
						this.addressItem = data;
					})
				}
			},
			save() {
				if(this.actionLoading === true) {
					return;
				}
				if(!this.addressItem.name) {
					this.$toast('姓名必填');
					return;
				}

				if(!this.addressItem.phone||!/^1(3|4|5|7|8)\d{9}$/.test(this.addressItem.phone)) {
					this.$toast("手机号码不正确");
					return;
				}

				if(!this.addressItem.address) {
					this.$toast("详细地址必填");
					return;
				}


				var param = {
						name: this.addressItem.name,
						phone: this.addressItem.phone,
						province: this.addressItem.province,
						city: this.addressItem.city,
						district: this.addressItem.district,
						address: this.addressItem.address,
						isDefault: this.addressItem.isDefault||false
					}
				if(this.$route.params.id&&this.$route.params.id == this.addressItem.id) {
					this.actionLoading = true;
					param.id = this.addressItem.id;
					this.$indicator.open({
			            spinnerType: 'fading-circle',
			            text: '执行中...'
			        });
					mod(param).then(() => {
						this.$indicator.close();
						this.$router.push("/delivery_address");
						this.actionLoading = false;
					}, () => {
						this.actionLoading = false;
						this.$toast('修改地址失败！');
					})
				} else {
					this.$indicator.open({
			            spinnerType: 'fading-circle',
			            text: '执行中...'
			        });
			        this.actionLoading = true;
					add(param).then(() => {
						this.$indicator.close();
						this.$router.push("/delivery_address");
						this.actionLoading = false;
					}, ()=> {
						this.actionLoading = false;
						this.$toast('新增地址失败！');
					})
				}
			},
			goToDeliverAddress() {
	            this.$router.back();
	        },
	        select(){
				this.show = true;
		    },
		    isShow(msg){
				this.show = msg.show;
				this.addressItem.province = msg.province;
				this.addressItem.city = msg.city;
				this.addressItem.district = msg.county;
			},
			goToHome() {
	            utils.goToPage("index.html")
	        }
		}
	}
	/* eslint-disable */
</script>